<template>
<vp-dialog ref="editDialogRef" :span="1">
    <template #title>
        <vp-label zh="新增数据权限组" en="Add Data Permission Group" v-if="type === 'add'"/>
        <vp-label zh="修改数据权限组" en="Edit Data Permission Group" v-else/>
    </template>
    <el-form label-suffix=":" v-loading="loading"  :model="formData" :rules="formRules" ref="formRef" label-width="120px">
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="mc">
                    <template #label><vp-label zh="名称" en="Name"/></template>
                    <el-input v-model="formData.mc" @blur="formData.mc=$event.target.value.trim()" maxlength="100"></el-input>
                </el-form-item>
            </vp-col>
            <vp-col :span=1>
                    <el-form-item prop="funcList">
                        <template #label><vp-label zh="适用功能" en="Appl. Func."/></template>
                        <el-select v-model="formData.funcList" filterable multiple  collapse-tags placeholder="请选择" class="w100">
                            <el-option label="部门自愿报告 Dept. Voluntary Report" :key="11" :value="11"></el-option>
                            <el-option label="公司自愿报告 Company Voluntary Report" :key="12" :value="12"></el-option>
                            <!-- <el-option label="部门举报信息 Dept. Report Info." :key="21" :value="21"></el-option>
                            <el-option label="公司举报信息 Company Report Info." :key="22" :value="22"></el-option> -->
                            <el-option label="部门整改反馈 Dept. Rectification" :key="31" :value="31"></el-option>
                            <el-option label="公司整改反馈 Company Rectification" :key="32" :value="32"></el-option>
                            <el-option label="部门安全隐患 Dept. Safety Hazard" :key="41" :value="41"></el-option>
                            <el-option label="公司安全隐患 Company Safety Hazard" :key="42" :value="42"></el-option>
                            <el-option label="部门安全风险管控 Dept. Security Risk Control" :key="51" :value="51"></el-option>
                            <el-option label="公司安全风险管控 Company Security Risk Control" :key="52" :value="52"></el-option>
                        </el-select>
                    </el-form-item>
                </vp-col>
            <vp-col :span=1>
                <el-form-item prop="sm">
                    <template #label><vp-label zh="说明" en="Desc."/></template>
                    <el-input type="textarea" v-model="formData.sm" @blur="formData.sm=$event.target.value.trim()" maxlength="1300"></el-input>
                </el-form-item>
            </vp-col>
        </el-row>
    </el-form>
    <template #footer>
        <vp-btn-confirm :loading="saveLoading" @click="handleSave" />
    </template>
</vp-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils'

export default defineComponent({
    name: "editRole",
    components: {},
    emits:["formSubmited"],
    setup(props, context) {
        const state = reactive({
			formData: {
                id:"",
                mc:"",
                sm:"",
                funcList: [],
            },
            formRules: {
                mc:[ 
                    validateUtils.notNull,
                ],
                funcList: [ 
                    validateUtils.notNull,
                ],
            },
            loading: false,
            type: 'add',
            saveLoading: false,
		});
        const editDialogRef = ref();
        const formRef = ref();
        const initForm = ()=>{
            state.formData = {
                id:"",
                mc:"",
                sm:"",
                funcList: [],
            }
        }
        const handleSave = () => {
            if(state.loading){
                return;
            }
            state.saveLoading = true;
            formRef.value.validate((valid: Boolean)=>{
                if(valid){
                    request.post('/system/dataGroup/'+state.type, {
                        ...state.formData,
                        functions: state.formData.funcList.map((func: any)=>{
                             return {sygn: func};
 
                        })
                    }).then(()=>{
                        context.emit("formSubmited");
                        editDialogRef.value.handleClose();
                    }).catch(()=>{
                    }).finally(()=>{
                        state.saveLoading = false;
                    })
                }else{
                    state.saveLoading = false;
                }
			})
        }
        const handleOpen = (pageType:number, type: string, id: string)=>{
            state.type = type;
            initForm();
            editDialogRef.value.handleOpen();
            if(type === 'edit'){
                state.loading = true;
                request.get(`/system/dataGroup/${id}`).then((res)=>{
                    state.formData = {
                        ...state.formData,
                        ...res.data,
                        funcList: (res.data.functions || []).map((func: any)=>{
                             return func.sygn;
                        })
                    };
                    state.loading = false;
                })
            }
        }

        return {
            ...toRefs(state),
            formRef,
            handleSave,
            editDialogRef,
            handleOpen,
        }
    },
})
</script>
